var area1 = document.getElementById("area_1");
var ctx1 = area1.getContext('2d');
area1.addEventListener("click", mouse_click, false);

// Устанавливаем высоту области равную ширине
area1.width = 0.6 * screen.height;
area1.height = area1.width;

// Определяем основные переменные
var N_cell = 3;
var size_cell = area1.height / N_cell;
var line_width = size_cell * 0.07;
var User_ID = 1;
var Victory = 0;
var All_Games = 0;
var Victory_Games = 0;
var Defeat_Games = 0;
// Тип игры, значения simple_both, user_and_user_local
var Type_game;
var start_user;

// Массив состояний клетки
var array_one_square = [[0, 0, 0], [0, 0, 0], [0, 0, 0]]
var array_user_1 = Clone_array(array_one_square);
var array_user_2 = Clone_array(array_one_square);
var array_all_square;

// Рисуем квадрат с окантовкой полпроцента от его ширины
function Draw_one_square (x, y, width, height) {
	this.fillRect(x, y, width, height);
	this.clearRect(x + 0.005 * width, y + 0.005 * width, 0.99 * width, 0.99* height);
};

// Рисуем нолик
function draw_O (x, y, obj) {
	obj.beginPath();
	obj.arc(x, y, size_cell / 3, 0, Math.PI*2, false);
	obj.closePath();
	obj.lineWidth = line_width;
    obj.strokeStyle = "#FF0000";
    obj.stroke();
};

// Рисуем крестик
function draw_X (x, y, obj) {
	obj.beginPath();
	obj.moveTo(x - size_cell / 3, y - size_cell / 3);
	obj.lineTo(x + size_cell / 3, y + size_cell / 3);
	obj.moveTo(x - size_cell / 3, y + size_cell / 3);
	obj.lineTo(x + size_cell / 3, y - size_cell / 3);
	obj.lineCap = "round";
	obj.lineWidth = line_width;
	obj.strokeStyle = "#0000FF";
	obj.stroke();
};

ctx1.draw_one_square = Draw_one_square

// Проверка условия выигрыша
function check_victory (array, N, name) {
	var sum = 0;
	var Sum = 0;
	// 3 по горизонтали
	outer:{
	for (var i=0; i<N; i++) {
		for (var j=0; j<N; j++) {
			sum = sum + array[i][j];
			if (sum == 3){ Sum = sum;
				break outer};
		};
		sum = 0;
	};
	};
	// 3 по вертикали
	outer:{
	for (var j=0; j<N; j++) {
		for (var i=0; i<N; i++) {
			sum = sum + array[i][j];
			if (sum == 3) { Sum = sum;
				break outer};
		};
		sum = 0;
	};
	};
	// 3 по главной диагонали
	for (var i=0; i<N; i++) {
		sum = sum + array[i][i];
		if (sum == 3) { Sum = sum;
				break};
	};
	sum = 0;
	// 3 по побочной диагонали
	for (var i=0; i<N; i++) {
		sum = sum + array[N -1-i][i];
		if (sum == 3) { Sum = sum;
				break};
	};
	if (Sum == 3) {

		Victory = 1;
		alert (name + " victory");
		if (name == "Both"){
			Defeat_Games = Defeat_Games +1;
		};
		if (name == "Your"){
			Victory_Games = Victory_Games +1;
		};
	};
};

// Заполняем область 10х10 квадратов
function Draw_all_square (x_start, y_start, width_one, height_one, obj) {
	for (var i=0; i<3; i++) {
		for (var j=0; j<3; j++) {
				obj.draw_one_square (x_start + i * width_one, y_start + j * height_one, width_one, height_one);
		}
	}
};

// Клонирование двумерного массива
function Clone_array (array) {
	var array_tmp = []
	for (var i=0; i<array.length; i++) {
	array_tmp[i] = array[i].slice(0)
	}
	return array_tmp;
};

// Сведение 2 массивов к одному результирующему
// знаку первого пользоватя соответствует значение 1, второго 2
function Glue_array (array1, array2) {
	var array_tmp = Clone_array(array_one_square);
	for (var i = 0; i < array1.length; i++) {
		for (var j = 0; j < array1.length; j++) {
			if (array1[i][j] == 0 && array2[i][j] == 0) {
				array_tmp[i][j] = 0;
			} else if (array1[i][j] == 1 && array2[i][j] == 0) {
				array_tmp[i][j] = 1;
			} else if (array1[i][j] == 0 && array2[i][j] == 1) {
				array_tmp[i][j] = 2;
			};
		};
	};
	return array_tmp;
};

// Считываем позицию курсора мыши
function get_cursor_position(e) {
var x;
var y;
	if (e.pageX != undefined && e.pageY != undefined) {
		x = e.pageX;
		y = e.pageY;
	}
	//else {
		//x = e.clientX + document.body.scrollLeft +
		//document.documentElement.scrollLeft;
		//y = e.clientY + document.body.scrollTop +
		//document.documentElement.scrollTop;
	//}
	x -= window.pageXOffset + area1.getBoundingClientRect().left;
    y -= window.pageYOffset + area1.getBoundingClientRect().top;
	return [Math.floor((x - 5) / size_cell), Math.floor((y - 5) / size_cell)];
};

// Обработка кликов мыши
function mouse_click (e) {
	var cell = get_cursor_position(e);
	if (array_user_1[cell[0]][cell[1]] == 0 && array_user_2[cell[0]][cell[1]] == 0 && Victory == 0) {
		array_all_square = Glue_array(array_user_1, array_user_2);
		// Играем с локальным ботом
		if (Type_game == "simple_both") {
			game_sample_both(cell)
		}
		// Играем с ботом на сервере
		else if (Type_game == "normal_both") {
			send_to_server(JSON.stringify(array_all_square));
		}
		// Играем локально между собой
		else if (Type_game == "user_and_user_local") {
			game_user_user_local(cell)
		};
	};
};
